<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="../js/jquery-easyui-1.6.10/themes/default/easyui.css" />
    <link rel="stylesheet" type="text/css" href="../js/jquery-easyui-1.6.10/themes/icon.css" />
    <script type="text/javascript" src="../js/jquery-easyui-1.6.10/jquery.min.js"></script>
    <script type="text/javascript" src="../js/jquery-easyui-1.6.10/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../js/jquery.serializejson.min.js"></script>
</head>

<body>
    <div class="easyui-layout" style="width:700px;height:350px;" data-options="fit:true">
        <div data-options="region:'south',split:true" style="height:50px;">
            <div id="tb" style="padding:3px;margin: 4px 680px">
                <!--  <span>新闻标题:</span>
                <input id="productid" style="line-height:26px;border:1px solid #ccc;text-indent: 10px">
                <a href="#" class="easyui-linkbutton" plain="true" id="lookof" onclick="doSearch()">Search</a> -->
            </div>
        </div>
        <div data-options="region:'west',split:true" title="West" style="width:200px;">
            <ul id="tt"></ul>
        </div>
        <div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'">
            <table id="dg"></table>
            <div id="dlg" class="easyui-dialog" title="数据操作" data-options="iconCls:'icon-save',closed: true" style="width:600px;height:400px;padding:10px">
                <form id="ff" class="easyui-form" method="POST" data-options="novalidate:true">
                    <div style="margin-bottom:20px">
                        新闻编号：<input class="" name="_id" style="width:80%" disabled="disabled" />
                    </div>
                    <div style="margin-bottom:20px">
                        <input class="easyui-textbox" name="NewsCid" id="NewsCid" style="width:100%" data-options="label:'类型编号:',required:true" />
                    </div>
                    <div style="margin-bottom:20px">
                        <input class="easyui-textbox" name="NewsClass" style="width:100%" data-options="label:'新闻类型:',required:true" />
                    </div>
                    <div style="margin-bottom:20px">
                        <input class="easyui-textbox" name="NewsTitle" style="width:100%" data-options="label:'新闻标题:',required:true" />
                    </div>
                    <div style="margin-bottom:20px">
                        <input class="easyui-textbox" name="NewsAddress" style="width:100%" data-options="label:'版权网站:',required:true" />
                    </div>
                    <div style="margin-bottom:20px">
                        <input class="easyui-datetimebox" name="UploadTime" data-options="required:true,showSeconds:false,label:'上传时间:'" value="" style="width:100%">
                    </div>
                    <div style="margin-bottom:20px">
                        <input class="easyui-textbox" name="NewsContent" style="width:100%" data-options="label:'新闻内容:',required:true" />
                    </div>
                    <div style="margin-bottom:20px">
                        <input class="easyui-textbox" name="NewsAuthor" style="width:100%" data-options="label:'作者:',required:true" />
                    </div>
                    <div style="margin-bottom:20px">
                        <input class="easyui-textbox" name="Uploader" style="width:100%" data-options="label:'上传人:',required:true" />
                    </div>
                    <div style="margin-bottom:20px">
                        <input class="easyui-textbox" name="UpdataRecord" style="width:100%" data-options="label:'更改记录:',required:true" />
                    </div>
                    <div style="margin-bottom:20px">
                        <input class="easyui-textbox" name="UpdataRperator" style="width:100%" data-options="label:'更改人员:',required:true" />
                    </div>
                    <div style="margin-bottom:20px">
                        <input class="easyui-textbox" name="ViewCount" style="width:100%" data-options="label:'浏览次数:',required:true" />
                    </div>
                </form>
                <div style="text-align:center;padding:5px 0">
                    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px">保 存</a>
                    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">清空</a>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

<script>
    var nodedata = {};
    $('#tt').tree({
        url: `http://10.31.161.18:3000/cate/list/3`,
        method: 'post',
        onClick: function(node) {
            $(this).tree(node.state === 'closed' ? 'expand' : 'collapse', node.target);
            node.state = node.state === 'closed' ? 'open' : 'closed';
            console.log(node)
            var title = node.text;
            nodedata.NewsCid = node._id;
            nodedata.text = node.text;
            $('#dg').datagrid({
                url: 'http://localhost:3000/newsManagement/query',
                fit: true,
                pagination: true,
                NewsTitle: node.text,
                queryParams: {
                    NewsCid: node._id,
                    text: node.text
                },
                toolbar: [{
                        text: '添加数据',
                        iconCls: 'icon-add',
                        handler: function() {
                            $('#ff').form('clear');
                            $('#dlg').dialog('open');
                            $('#NewsCid').textbox('setValue', nodedata.NewsCid)
                        }
                    },
                    '-', {
                        text: '删除数据',
                        iconCls: 'icon-cut',
                        handler: function() {
                            deleteDatas();
                        }
                    }
                ],
                columns: [
                    [{
                        field: 'ck',
                        checkbox: true
                    }, {
                        field: 'NewsCid',
                        title: '类型编号',
                        width: 100
                    }, {
                        field: 'NewsClass',
                        title: '新闻类型',
                        width: 100
                    }, {
                        field: 'NewsTitle',
                        title: '新闻标题',
                        width: 100
                    }, {
                        field: 'NewsAddress',
                        title: '版权网站',
                        width: 100
                    }, {
                        field: 'UploadTime',
                        title: '发布时间',
                        width: 100
                    }, {
                        field: 'NewsContent',
                        title: '新闻内容',
                        width: 100
                    }, {
                        field: 'NewsAuthor',
                        title: '作者',
                        width: 100
                    }, {
                        field: 'Uploader',
                        title: '上传人',
                        width: 100
                    }, {
                        field: 'UpdataRecord',
                        title: '更改记录',
                        width: 100
                    }, {
                        field: 'UpdataRperator',
                        title: '更改人员',
                        width: 100
                    }, {
                        field: 'ViewCount',
                        title: '浏览次数',
                        width: 100
                    }, {
                        field: '_id',
                        title: '操作',
                        width: 80,
                        formatter: function(value, row, index) {
                            return `<a href="#" onclick="editData('${row._id}')">修改</a> <a href="#" onclick="deleteData('${row._id}')">删除</a>`;
                        }
                    }]
                ],
                onDblClickRow: function(index, row) {
                    console.log(index, row);
                }
            });
        }
    });
    //新闻具体操作
    function submitForm() {
        $('#ff').form('submit', {
            onSubmit: function() {
                if ($(this).form('enableValidation').form('validate')) {
                    var formData = $('#ff').serializeJSON();
                    console.log(formData);
                    if ($('#ff').serializeJSON()._id) {
                        $.ajax({
                            url: `http://localhost:3000/newsManagement/${formData._id}`,
                            type: 'put',
                            data: $('#ff').serializeJSON()
                        }).done(function(res) {
                            $('#dlg').dialog('close')
                            $('#dg').datagrid('reload');
                            $('#ff').form('clear');
                        });
                    } else {
                        delete formData._id;
                        console.log();
                        $('#NewsCid').val("nodedata.NewsCid");
                        $.ajax({
                            url: 'http://localhost:3000/newsManagement',
                            type: 'post',
                            data: formData
                        }).done(function(res) {
                            $('#dlg').dialog('close');
                            $('#dg').datagrid('reload');
                            $('#ff').form('clear');
                        });
                    }

                };
            }
        });
    }

    function clearForm() {
        $('#ff').form('clear');
    }

    function deleteData(id) {
        $.messager.confirm('确认框', '你确认删除该数据?', function(r) {
            if (r) {
                $.ajax({
                    url: `http://localhost:3000/newsManagement/${id}`,
                    type: 'delete'
                }).done(function(res) {
                    $('#dg').datagrid('reload');
                });
            }
        });
    }

    function editData(id) {
        $.ajax({
            url: `http://localhost:3000/newsManagement/${id}`,
            type: 'get'
        }).done(function(res) {
            $('#ff').form('load', res);
            $('#dlg').dialog('open');
        });
    }

    function deleteDatas() {
        var dgSelections = $('#dg').datagrid('getSelections');
        var ids = [];
        for (var i = 0; i < dgSelections.length; i++) {
            ids.push(dgSelections[i]._id);
        }
        $.messager.confirm('警告', '你确认删除选中的数据?', function(r) {
            $.ajax({
                url: `http://localhost:3000/newsManagement/${ids}`,
                type: 'delete'
            }).done(function(res) {
                $('#dg').datagrid('reload');
            });
        });
    }
</script>